<template>
  <div class="title">
    慧注册，是一款为会展活动打造的低代码在线表单工具，帮您轻松完成信息登记、活动报名/注册/签到、数据收集、管理和分析工作，提升工作效率。慧注册适合各类业务活动，用户可通过简单拖拽或者选择模版即可搭建出符合活动需求的表单。
  </div>
  <div class="tip pl-[30px] md:pl-[100px]">请认真填写需求，我们会在 <b>3个工作日</b> 内与您联系</div>
  <n-form ref="formRef" :rules="rules" :model="form" label-placement="left" label-width="100px">
    <n-form-item label="姓名" path="name">
      <n-input
        v-model:value="form.name"
        :maxlength="50"
        placeholder="请输入姓名"
        clearable
        class="el-width"
      />
    </n-form-item>
    <n-form-item label="手机号" path="mobile">
      <n-input
        v-model:value="form.mobile"
        :maxlength="11"
        placeholder="请输入手机号"
        clearable
        class="el-width"
      />
    </n-form-item>
    <n-form-item label="公司/单位" path="company">
      <n-input
        v-model:value="form.company"
        placeholder="请输入公司/单位名称"
        clearable
        class="el-width"
      />
    </n-form-item>
    <n-space class="flex">
      <n-form-item label="所属省市" path="province">
        <n-select
          v-model:value="form.province"
          :options="pOptions"
          placeholder="省份/直辖市"
          class="el-address"
          @update:value="handleProvince"
        />
      </n-form-item>
      <n-form-item v-if="md" path="city" label-width="10px">
        <n-select
          v-model:value="form.city"
          :options="cOptions"
          placeholder="城市"
          class="el-address"
        />
      </n-form-item>
    </n-space>
    <n-form-item v-if="!md" label="城市" path="city">
      <n-select
        v-model:value="form.city"
        :options="cOptions"
        placeholder="城市"
        class="el-address"
      />
    </n-form-item>
    <n-form-item label="活动规模" path="scale">
      <n-radio-group v-model:value="form.scale">
        <n-radio
          class="number-item"
          v-for="(itemScale, index) in scale"
          :key="index"
          :value="itemScale"
        >
          {{ itemScale }}
        </n-radio>
      </n-radio-group>
    </n-form-item>
    <n-form-item label="活动需求" path="demand">
      <n-checkbox-group v-model:value="form.demand">
        <n-checkbox
          class="need-item"
          v-for="(itemDemand, index) in demand"
          :label="itemDemand"
          :value="itemDemand"
          :key="index"
        />
      </n-checkbox-group>
    </n-form-item>
    <n-form-item label="所属行业" path="industries">
      <n-checkbox-group v-model:value="form.industries">
        <n-checkbox
          class="need-item"
          v-for="(itemIndustries, index) in industries"
          :label="itemIndustries"
          :value="itemIndustries"
          :key="index"
        />
      </n-checkbox-group>
    </n-form-item>
    <n-form-item label="其他需求" path="remark">
      <n-input
        v-model:value="form.remark"
        type="textarea"
        placeholder="请输入其他需求"
        clearable
        class="el-width"
      />
    </n-form-item>
  </n-form>
  <n-space justify="end">
    <n-button @click="close">取消</n-button>
    <n-button :loading="hasSubmit" type="primary" @click="handleSubmit">提交</n-button>
  </n-space>
</template>
<script lang="ts" setup>
  import { ref, reactive, onMounted, unref } from 'vue';
  import { useMessage } from 'naive-ui';
  import { checkPhone } from '@/utils/validate';
  import { getCity } from '@/api/events';
  import {postApply, getDemand, getScale, getIndustry} from '@/api/service/publicity';
  import useH5Breakpoints from '@/hooks/useH5Breakpoints';
  const md = useH5Breakpoints();
  interface cityItem {
    label: string;
    value: string;
  }
  interface provinceItem {
    label: string;
    value: string;
    items: cityItem[];
  }
  const emit = defineEmits(['submit']);
  const message = useMessage();
  const formRef = ref();
  const visible = ref(false);
  const hasSubmit = ref(false);
  const demand = ref([]);
  const scale = ref([]);
  const industries = ref([]);
  const pOptions = ref<provinceItem[]>([]);
  const cOptions = ref<cityItem[]>([]);

  const formInit = {
    name: '',
    mobile: '',
    company: '',
    province: null,
    city: null,
    scale: null,
    demand: [],
    industries: [],
    remark: '',
  };

  const defaultFormModel = Object.assign({}, formInit);
  const form = reactive(formInit);

  const rules = {
    name: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
    mobile: [{ required: true, validator: checkPhone, trigger: ['blur', 'change'] }],
    company: [{ required: true, message: '请输入公司/单位名称', trigger: ['blur', 'change'] }],
    province: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
    city: [{ required: true, message: '请选择', trigger: ['blur', 'change'] }],
    scale: [{ required: true, message: '请选择活动规模', trigger: ['blur', 'change'] }],
    demand: [
      { required: true, message: '请选择活动需求', type: 'array', trigger: ['blur', 'change'] },
    ],
    industries: [
      { required: true, message: '请选择所属行业', type: 'array', trigger: ['blur', 'change'] },
    ],
  };

  function handleProvince(val) {
    form.city = '';
    const province = pOptions.value.filter((item) => {
      return item.label === val;
    });
    const options = province[0].items ? province[0].items : [{ name: val }];
    cOptions.value = options.map((v) => ({
      label: v.name,
      value: v.name,
    }));
    form.city = cOptions.value[0].label;
  }

  function close() {
    visible.value = false;
    formRef.value.restoreValidation();
    Object.keys(form).forEach((key) => {
      form[key] = unref(defaultFormModel)[key] || null;
    });
    emit('submit');
  }

  function handleSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        save();
      } else {
        return false;
      }
    });
  }

  function save() {
    hasSubmit.value = true;
    postApply(form)
      .then((_res) => {
        hasSubmit.value = false;
        message.success('提交成功，我们会在 3个工作日 内与您联系');
        close();
      })
      .catch((_e) => {
        hasSubmit.value = false;
      });
  }

  function getDemandList() {
    getDemand().then((res) => {
      demand.value = res.items;
    });
  }

  function getScaleList() {
    getScale().then((res) => {
      scale.value = res.items;
    });
  }
  function getIndustryList() {
    getIndustry().then((res) => {
      industries.value = res.items;
    });
  }
  function getCityList() {
    getCity().then((res) => {
      pOptions.value = res.map((v: { name: any; items: any }) => ({
        label: v.name,
        value: v.name,
        items: v.items,
      }));
    });
  }

  onMounted(() => {
    getDemandList();
    getScaleList();
    getIndustryList();
    getCityList();
  });

  defineExpose({
    visible,
  });
</script>
<style lang="less" scoped>
  .el-width {
    width: 360px;
  }
  .title {
    padding: 10px 30px 10px;
    line-height: 24px;
    font-weight: bold;
  }
  .tip {
    padding-left: 100px;
    padding-bottom: 20px;
    font-size: 15px;
    b {
      color: #409eff;
    }
  }
  .need-item {
    width: 200px;
  }
  .number-item {
    width: 200px;
    margin-top: 10px;
  }
  .el-address {
    width: 175px;
  }
</style>
